<!-- 设置动态表单组件--左侧控件列表 -->
<template>
  <div class="leftConfig">
    <div class="formSetUp">
      <div class="leftConfig-title">表单设置</div>
      <div class="formSetUp-body">
        <a-radio-group type="button" v-model="copyLayout">
          <a-radio value="horizontal">水平排列</a-radio>
          <a-radio value="vertical">垂直排列</a-radio>
          <!-- <a-radio value="inline">行内排列</a-radio> -->
        </a-radio-group>
      </div>
    </div>
    <!--tabs列表  -->
    <a-tabs v-model:active-key="tabChoiceKey">
      <a-tab-pane
        :key="item.code"
        :title="item.tabName"
        v-for="item in tabShowList"
      />
    </a-tabs>
    <div class="tabs">
      <!-- 拖拽组件 -->
      <draggable
        class="tabComponentBox"
        :list="componentTabList"
        :group="{ name: 'people', pull: 'clone', put: false }"
        itemKey="controlName"
        :clone="cloneItem"
      >
        <template #item="{ element }">
          <div class="tabComponentBox-item">
            <a-button>
              <template #icon>
                <icon-font :type="element.icon" :size="14"></icon-font>
              </template>
              <template #default> {{ element.componentName }} </template>
            </a-button>
          </div>
        </template>
      </draggable>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref, computed } from 'vue';
  import { Icon } from '@arco-design/web-vue';
  import uniqueid from 'lodash.uniqueid';
  import draggable from 'vuedraggable';
  import { tabList, componentList } from '../../../set-up-config';

  const props = withDefaults(
    //参数说明
    defineProps<{
      tabCodeList: string[]; //tab显示的tab列表
      layout: string;
    }>(),
    {}
  );

  const emit = defineEmits(['layoutChange']);

  const copyLayout = computed({
    get() {
      return props.layout;
    },
    set(val) {
      emit('layoutChange', val);
    },
  });

  const IconFont = Icon.addFromIconFontCn({
    src: 'https://at.alicdn.com/t/c/font_3782788_m3fazt9fbc.js',
  });
  const tabChoiceKey = ref('baseComponent'); //tab 选中的key

  //通过tabCodeList过滤出要显示的tab列表
  const tabShowList = computed<any>(() => {
    const list = props.tabCodeList.map((code) =>
      tabList.find((item) => code === item.code)
    );
    return list;
  });

  const buyComponentTabList = [];

  //通过tabShowList过滤出要显示的component列表
  const componentTabList: any = computed(() => {
    const tabItem = tabShowList.value.find(
      (item: any) => tabChoiceKey.value === item.code
    );
    return tabItem.componentCodeList.map((code: string) =>
      componentList.find((item) => item.code === code)
    );
  });

  //拖拽发生时retuan处理过后的数据
  const cloneItem = ({ componentType, props, code, componentName }: any) => {
    let isProcessConditions = 2; // 是否设为流程条件
    let span = 12; // 控件默认宽度，如果是长控件需重新赋值24，如表格，交货要求
    let fieldName = '';
    // 如果复选框选项为空，默认添加三个
    if (
      typeof props === 'object' &&
      Object.keys(props).length === 0 &&
      componentType === 'CHECK_BOX'
    ) {
      if (!props.options?.length) {
        props.options = [
          { label: '选项 1', value: '1' },
          { label: '选项 2', value: '2' },
        ];
      }
    }
    // 客户编号
    if (componentType === 'CLIENT_NUMBER') {
      fieldName = 'clientNumber';
    }
    // 产品明细
    if (componentType === 'PRODUCT_DETAIL') {
      span = 24;
      props.columns = [
        {
          title: '产品编号',
          dataIndex: 'coding',
          slotName: 'coding',
        },
        {
          title: '产品名称',
          dataIndex: 'name',
          slotName: 'name',
        },
        {
          title: '规格型号',
          dataIndex: 'model',
          slotName: 'model',
        },
        {
          title: '销售单位',
          dataIndex: 'salesUnit',
          slotName: 'salesUnit',
        },
        {
          title: '销售单价',
          dataIndex: 'salesPrice',
          slotName: 'salesPrice',
        },
        {
          title: '折扣',
          dataIndex: 'discount',
          slotName: 'discount',
        },
        {
          title: '销售数量',
          dataIndex: 'salesNum',
          slotName: 'salesNum',
        },
        {
          title: '合计',
          dataIndex: 'total',
          slotName: 'total',
        },
        {
          title: '操作',
          dataIndex: 'optional',
          slotName: 'optional',
        },
      ];
      props.data = [
        {
          coding: '', // 产品编码
          name: '', // 产品名称
          model: '', // 规格
          salesUnit: '', // 销售单位
          // 销售单价
          salesPrice: {
            money: undefined,
            unit: '人民币',
          },
          discount: '',
          salesNum: undefined, // 数量
          total: {
            money: undefined,
            unit: '人民币',
          },
        },
      ];
      fieldName = 'productDetail';
    }
    // 如果是表格，并且表格数据为空，默认给表头和一行空数据
    if (componentType === 'TABLE') {
      span = 24;
      props.data = [];
      props.totalPrice = 0;
    }
    // 如果是交货要求控件
    if (componentType === 'DELIVERY_REQUIREMENTS_BC') {
      span = 24;
      props.data = [
        {
          coding: '', // 产品编号
          name: '', // 产品名称
          items: [
            {
              number: undefined, // 销售数量
              deliveryTime: undefined, // 交货时间
              deliveryType: '1', // 交货方式
              remark: '', // 备注
              short: undefined, // 产品生产最短周期
              earlyWarning: undefined, // 产品生产最短周期
            },
          ],
        },
      ];
    }
    if (componentType === 'FILE') {
      props.data = [];
    }
    if (componentType === 'SELECT') {
      // 如果是下拉选择
      props.selectOptions = [
        { label: '选项 1', value: '1' },
        { label: '选项 2', value: '2' },
      ];
    }
    // 如果是下拉选择radioOptionss
    if (componentType === 'RADIO') {
      props.radioOptions = [
        { label: '选项 1', value: '1' },
        { label: '选项 2', value: '2' },
      ];
    }
    // 如果是客户选择
    if (componentType === 'CLIENT') {
      isProcessConditions = 1;
      fieldName = 'clientId';
    }
    // 如果是关联合同
    if (componentType === 'CONTRACT_SELECT') {
      fieldName = 'contractId';
    }
    //我方签约主体
    if (componentType === 'COMPANY') {
      fieldName = 'company';
    }

    // 业务跟单
    if (componentType === 'BUSINESS_COPYING') {
      fieldName = 'businessCopying';
    }
    // 业务跟单
    if (componentType === 'BUSINESS_COPYING') {
      fieldName = 'businessCopying';
    }
    // 签约日期
    if (componentType === 'AGENCY_DATE') {
      fieldName = 'agencyDate';
    }
    // 结束日期
    if (componentType === 'END_DATE') {
      fieldName = 'endTime';
    }
    // 合同总金额
    if (componentType === 'CONTRACT_TOTAL') {
      fieldName = 'contractTotal';
      props.options = [
        { label: '人民币', icon: '¥', value: '1' },
        { label: '美元', icon: '$', value: '2' },
      ];
      props.checkValue = '人民币';
    }
    // 合同内容
    if (componentType === 'CONTRACT_CONTENT') {
      fieldName = 'contractContent';
    }
    // 合同付款方式
    if (componentType === 'CONTRACT_PAYMENT') {
      fieldName = 'payMode';
    }
    // 付款方式
    if (componentType === 'PAYMENT_METHOD') {
      fieldName = 'payMode';
    }
    // // 收款账户
    // if (componentType === 'RECEIVING_ACCOUNT') {
    //   fieldName = 'collectMoney';
    // }
    // 发票类型
    if (componentType === 'INVOICE_TYPE') {
      fieldName = 'invoiceId';
    }
    // 发票税率
    if (componentType === 'INVOICE_RATE') {
      fieldName = 'invoiceRate';
    }
    // 单位抬头
    if (componentType === 'COMPANY_TITLE') {
      fieldName = 'companyTitle';
    }
    // 纳税人识别码
    if (componentType === 'TAXPAYER_IDENTIFICATION_NUMBER') {
      fieldName = 'taxpayerIdentificationNumber';
    }
    // 开户行
    if (componentType === 'ACCOUNT_BANK') {
      fieldName = 'accountBank';
    }
    // 单位地址
    if (componentType === 'UNIT_ADDRESS') {
      fieldName = 'unitAddress';
    }
    // 发票备注信息
    if (componentType === 'INVOICE_REMARK') {
      fieldName = 'remark';
    }
    // 收款账户
    if (componentType === 'RECEIVING_ACCOUNT') {
      fieldName = 'collectionAccountId';
    }

    if (componentType === 'NUMBER-UNIVERSAL') {
      fieldName = 'number';
    }
    // 采购申请编号
    if (componentType === 'BUY_APPLYNUMBER') {
      fieldName = 'number';
    }
    // 采购申请名称
    if (componentType === 'BUY_APPLYNAME') {
      fieldName = 'name';
    }
    // 供应商名称
    if (componentType === 'SUOOLIER-NAME') {
      fieldName = 'supplierId';
    }
    // 供应商编号
    if (componentType === 'SUOOLIER-NAME') {
      fieldName = 'supplierNumber';
    }
    // 联系电话
    if (componentType === 'CONTACT-NUMBER') {
      fieldName = 'phone';
    }
    // 联系人
    if (componentType === 'PHONE') {
      fieldName = 'contactMan';
    }
    // 邮箱
    if (componentType === 'E-MAIL') {
      fieldName = 'E-MAIL';
    }
    // 采购员
    if (componentType === 'BUYER') {
      fieldName = 'salesman';
    }
    // 付款明细表
    if (componentType === 'PAYMENT_DETAILS') {
      span = 24;
      props.columns = [
        {
          title: '付款期数',
          dataIndex: 'stages',
          slotName: 'stages',
        },
        {
          title: '付款条件',
          dataIndex: 'condition',
          slotName: 'condition',
        },
        {
          title: '付款金额',
          dataIndex: 'amount',
          slotName: 'amount',
        },
        {
          title: '付款比例',
          dataIndex: 'rate',
          slotName: 'rate',
        },
        {
          title: '付款类别',
          dataIndex: 'type',
          slotName: 'type',
        },
        {
          title: '支付方式',
          dataIndex: 'method',
          slotName: 'method',
        },
        {
          title: '备注',
          dataIndex: 'remark',
          slotName: 'remark',
        },
        {
          title: '操作',
          dataIndex: 'optional',
          slotName: 'optional',
        },
      ];
      props.data = [
        {
          stages: '',
          condition: '',
          amount: '',
          rate: '',
          type: '',
          method: '',
          remark: '',
        },
      ];
    }
    // 采购明细
    if (componentType === 'BUY-DETAILED') {
      span = 24;
      props.columns = [
        {
          title: '物料编码',
          dataIndex: 'number',
          slotName: 'number',
        },
        {
          title: '物料名称',
          dataIndex: 'name',
          slotName: 'name',
        },
        {
          title: '规格型号',
          dataIndex: 'spce',
          slotName: 'spce',
        },
        {
          title: '基本单位',
          dataIndex: 'unit',
          slotName: 'unit',
        },
        {
          title: '物料指导单价',
          dataIndex: 'unitPrice',
          slotName: 'unitPrice',
        },
        {
          title: '折扣',
          dataIndex: 'discount',
          slotName: 'discount',
        },
        {
          title: '需求数量',
          dataIndex: 'amount',
          slotName: 'amount',
        },
        {
          title: '合计',
          dataIndex: 'total',
          slotName: 'total',
        },
        {
          title: '操作',
          dataIndex: 'operation',
          slotName: 'operation',
        },
      ];
      props.data = [
        {
          number: '',
          name: '',
          spce: '',
          unit: '',
          unitPrice: { money: '', unit: '' },
          discount: '',
          amount: '',
          total: { money: '', unit: '' },
        },
      ];
    }

    // 采购计划明细
    if (componentType === 'BUY-PLAN-DETAILS') {
      span = 24;
      props.columns = [
        {
          title: '物料编码',
          code: 'number',
        },
        {
          title: '物料名称',
          code: 'name',
        },
        {
          title: '规格型号',
          code: 'spec',
        },
        {
          title: '基本单位',
          code: 'basicName',
        },

        {
          title: '实际需求数量',
          code: 'actualAmount',
          slotName: 'actualAmount',
        },
        {
          title: '供应商名称',
          code: 'supplierName',
        },
        {
          title: '产品指导单价',
          code: 'guidePrice',
        },
        {
          title: '折扣',
          code: 'discount',
        },
        {
          title: '合计',
          code: 'totalPrice',
        },
      ];
      props.data = [
        {
          number: '',
          name: '',
          spce: '',
          unit: '',
          unitPrice: { money: '', unit: '' },
          discount: '',
          amount: '',
          total: { money: '', unit: '' },
        },
      ];
    }

    // 采购申请明细表
    if (componentType === 'APPLY_DETAILED') {
      span = 24;
      props.columns = [
        {
          title: '物料类型',
          dataIndex: 'materialName',
          slotName: 'materialName',
        },
        {
          title: '物料编码',
          dataIndex: 'number',
          slotName: 'number',
        },
        {
          title: '物料名称',
          dataIndex: 'name',
          slotName: 'name',
        },
        {
          title: '规格型号',
          dataIndex: 'spec',
          slotName: 'spec',
        },
        {
          title: '基本单位',
          dataIndex: 'purchaseUnitName',
          slotName: 'purchaseUnitName',
        },
        {
          title: '需求数量',
          dataIndex: 'amount',
          slotName: 'amount',
        },
        {
          title: '需求交付日期',
          dataIndex: 'deliveryTime',
          slotName: 'deliveryTime',
        },
        {
          title: '操作',
          dataIndex: 'optional',
          slotName: 'optional',
        },
      ];
      props.data = [
        {
          materialName: '',
          code: '',
          name: '',
          spec: '',
          purchaseUnitName: '',
          amount: '',
          deliveryTime: '',
        },
      ];
    }
    return {
      show: 1,
      componentType,
      code,
      props,
      name: componentName,
      required: 2,
      span,
      uuid: uniqueid(''),
      values: [],
      isMust: 2,
      isProcessConditions,
      fieldName,
    };
  };
</script>

<style lang="less" scoped>
  .leftConfig {
    background: #fff;
    width: 100%;
    // position: absolute;
    // left: 0;
    // top: 0;
    // width: 300px;
    // height: 100vh;
    .tabs {
      height: 100%;
      overflow: auto;
    }
    &-title {
      line-height: 40px;
      height: 40px;
      border-bottom: var(--color-neutral-3) solid 1px;
      display: flex;
      justify-content: space-between;
      padding: 0 15px;
      font-size: 16px;
    }
  }

  .formSetUp {
    border-bottom: var(--color-neutral-3) solid 1px;

    &-body {
      padding: 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
  }

  .tabComponentBox {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 10px;
    overflow-x: auto;

    &-item {
      border: rgb(212, 212, 212) dashed 1px;
      background: rgb(250, 250, 250);
      width: 120px;
      padding: 5px;
      cursor: pointer;
      margin-bottom: 10px;
    }

    :deep(.arco-btn-secondary) {
      width: 100%;
    }

    &-item:hover {
      background: rgb(241, 238, 255);

      span {
        color: rgb(181, 172, 226);
      }
    }
  }
</style>
